<template>
  <div class="container">
<!--    轮播图-->
    <div class="rotation-chart">
<!--      <el-carousel>-->
<!--        <el-carousel-item v-for="item in rotationImage" :key="item">-->
<!--          <img :src="item" class="rotation-chart-image">-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="(item,index) in scenicList" :key="index">
          <img :src="item.img" class="rotation-chart-image" @click="changeNowScenicId(item.id)">
        </el-carousel-item>
      </el-carousel>
      <div class="jiantou" v-if="isArrow">
        <i class="icon-xiangxiajiantou"></i>
      </div>
    </div>
<!--    景点选项-->
    <div class="scenic-spot">
      <div class="scenic-spot-item" v-for="(item,index) in scenicList" :key="index" @click="changeNowScenicId(item.id)">{{item.name}}</div>
    </div>
<!--    景点信息-->
    <div class="scenic-spot-info">
<!--      景点展示盒子-->
      <div class="scenic-spot-info-box">
<!--        标签按钮-->
        <div class="tags">
          <div id="tagBar" ref="photoTag" @click="changeInfoPhotoBox()">图<br>片</div>
          <div id="tagBar" ref="mapTag" @click="changeInfoMapBox()">地<br>图</div>
          <div id="tagBar" ref="sceneTag" @click="changeInfoSceneBox()">实<br>景</div>
        </div>
<!--        展示盒子-->
        <div class="box-switch">
<!--          图片盒子-->
          <div class="image-box" ref="imgBox">
            <img :src="nowSceniceInfo.img">
          </div>
<!--          地图盒子-->
          <div class="map-box" ref="mapBox">
            <el-amap
                vid="amapDemo"
                :zoom="zoom"
                :center="center">
              <el-amap-marker v-for="(marker,index) in markers" :key="index" :events="marker.events" :position="marker.position"></el-amap-marker>
              <el-amap-info-window
                  v-if="window"
                  :position="window.position"
                  :visible="window.visible"
                  :content="window.content"
                  :offset="window.offset"
                  :close-when-click-map="true"
                  :is-custom="true"
              >
                <div id="info-window">
                  <p>{{ window.address }}</p>
                </div>
              </el-amap-info-window>
            </el-amap>
          </div>
<!--          实景盒子-->
          <div class="scene-box" ref="sceneBox">
            <iframe class="scenic-iframe" src="https://map.baidu.com/search/%E7%A7%A6%E7%9A%87%E5%B2%9B%E5%B8%82/@13299046,4813557.5,21z,87t?querytype=cur&wd=%E7%A7%A6%E7%9A%87%E5%B2%9B%E5%B8%82&da_src=shareurl#panoid=d649856dc8c1f65aa1d230e5&panotype=inter&heading=7&pitch=0&l=21&tn=B_NORMAL_MAP&sc=0&newmap=1&shareurl=1&pid=1002960001150810103454156IN&iid=d649856dc8c1f65aa1d230e5&psp=%7B%22PanoIndoorPoiModule%22%3A%7B%22uid%22%3A%22104c028cd1c0e78b223bf235%22%7D%7D"></iframe>
          </div>
        </div>
      </div>
<!--      景点展示内容-->
      <div class="scenic-spot-info-content">
        <div class="scenic-spot-name">{{nowSceniceInfo.name}}</div>
        <div class="scenic-spot-info-item scenic-spot-introduction">
          <div class="scenic-spot-introduction-title">景点简介：</div>
          <div class="scenic-spot-introduction-content">{{nowSceniceInfo.introduction}}</div>
        </div>
        <div class="scenic-spot-info-item scenic-spot-position">
          <div class="scenic-spot-introduction-title">景点位置：</div>
          <div class="scenic-spot-introduction-content">{{nowSceniceInfo.position}}</div>
        </div>
        <div class="scenic-spot-info-item scenic-spot-time">
          <div class="scenic-spot-introduction-title">开放时间：</div>
          <div class="scenic-spot-introduction-content">{{nowSceniceInfo.openTime}}</div>
        </div>
        <div class="scenic-spot-info-item scenic-spot-ticket">
          <div class="scenic-spot-introduction-title">门票信息：</div>
          <div class="scenic-spot-introduction-content">{{nowSceniceInfo.ticket}}</div>
        </div>
        <div class="scenic-spot-info-collect" @click="collectSpot">
          <i class="icon-icon-1" style="font-family: iconfont; color: #ffbb33;" v-show="isCollected"><span style="color: #2c3e50"> 收藏景点</span></i>
          <i class="icon-icon-" style="font-family: iconfont; color: #ffbb33;" v-show="!isCollected"><span style="color: #2c3e50"> 收藏景点</span></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import AMap from "postcss";

export default {
  name: "Container",
  data() {
    const self = this
    return {
      value: true,
      userPhone: this.$route.query.phone,
      scenicList: [],
      rotationImage: [
                        require('../assets/rotation1.jpg'),
                        require('../assets/rotation2.jpg'),
                        require('../assets/rotation3.jpg'),
                        require('../assets/rotation4.jpg'),
                        require('../assets/rotation5.jpg'),
                        require('../assets/rotation6.jpg'),
                        require('../assets/rotation7.jpg'),
                        require('../assets/rotation8.jpg'),
                        require('../assets/rotation9.jpg')
                      ],
      data: [
        {
          position: '119.526688, 39.836216',
          address: '鸽子窝公园'
        },
        {
          position: '119.535365, 39.82047',
          address: '碧螺塔酒吧公园'
        },
        {
          position: '119.458809, 39.824137',
          address: '联峰山公园'
        },
        {
          position: '119.488542, 39.813902',
          address: '老虎石海上公园'
        },
        {
          position: '119.498327, 39.826546',
          address: '怪楼奇园景区'
        },
        {
          position: '119.498327,39.826546',
          address: '秦皇岛野生动物园'
        },
        {
          position: '119.564164, 39.906766',
          address: '新澳海底世界'
        },
        {
          position: '119.429066,39.790493',
          address: '南戴河旅游度假区'
        },
        {
          position: '119.399884, 39.772288',
          address: '远洋蔚蓝海岸'
        },
        {
          position: '119.6227, 39.913317',
          address: '秦皇求仙入海处'
        },
        {
          position: '119.757607, 39.955585',
          address: '乐岛海洋王国'
        },
        {
          position: '119.760042,40.01084',
          address: '天下第一关'
        },
        {
          position: '119.797691,39.968517',
          address: '老龙头景区'
        },
        {
          position: '119.45783,40.142826',
          address: '祖山风景区'
        },
        {
          position: '119.704406,40.043875',
          address: '堰塞湖景区'
        },
        {
          position: '119.741669,40.037204',
          address: '角山长城'
        }
      ],
      center: [119.51962, 39.888171],
      zoom: 13,
      markers:[],
      window: '',
      events: {
        click (e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
        }
      },
      lng: 0,
      lat: 0,
      timer: '',
      isCollected: false, //景点是否已收藏
      nowScenicId: 0,  //点击的景点id
      nowSceniceInfo: {}, //点击的景点信息
      collectionList: [], //用户收藏的景点信息
      isArrow: true,  //指示箭头
    }
  },
  created() {
    this.getCollection()
    this.getScenic()

  },
  mounted() {
    // this.userPhone = this.$route.query.phone
    this.$refs.photoTag.className = 'checkded'
    this.$refs.mapTag.className = 'noChecked'
    this.$refs.sceneTag.className = 'noChecked'
    this.$refs.imgBox.style.display = 'block'
    this.$refs.mapBox.style.display = 'none'
    this.$refs.sceneBox.style.display = 'none'
    // this.timer = setTimeout(this.putData, 30)
    // this.putData()
    this.point()
    this.translate()
    this.getCollection()
    this.getScenic()
    // this.nowScenicId = this.scenicList[0].id
    // this.nowSceniceInfo = this.scenicList[0]

    // this.getCollection(this.nowScenicId)
    this.checkCollection(this.nowScenicId)
    window.addEventListener('scroll', this.handleScroll) //滚轮方法
  },
  methods: {
    // 修改左侧盒子展示情况以及按钮样式
    changeInfoPhotoBox () {
      this.$refs.photoTag.className = 'checkded'
      this.$refs.mapTag.className = 'noChecked'
      this.$refs.sceneTag.className = 'noChecked'
      this.$refs.imgBox.style.display = 'block'
      this.$refs.mapBox.style.display = 'none'
      this.$refs.sceneBox.style.display = 'none'
    },
    changeInfoMapBox () {
      this.$refs.mapTag.className = 'checked'
      this.$refs.photoTag.className = 'noChecked'
      this.$refs.sceneTag.className = 'noChecked'
      this.$refs.mapBox.style.display = 'block'
      this.$refs.imgBox.style.display = 'none'
      this.$refs.sceneBox.style.display = 'none'
    },
    changeInfoSceneBox () {
      this.$refs.sceneTag.className = 'checked'
      this.$refs.photoTag.className = 'noChecked'
      this.$refs.mapTag.className = 'noChecked'
      this.$refs.sceneBox.style.display = 'block'
      this.$refs.mapBox.style.display = 'none'
      this.$refs.imgBox.style.display = 'none'
    },

    // 获取景点信息
    getScenic() {
      this.$axios({
        method: 'GET',
        url: '/getScenic'
      }).then(res=>{
        if (res.data.result == 1) {
          this.scenicList = res.data.list
          console.log(this.scenicList)
          this.nowScenicId = this.scenicList[0].id
          this.nowSceniceInfo = this.scenicList[0]
          // this.getCollection(this.nowScenicId)
          console.log('nowid',this.nowScenicId,this.collectionList)
          this.checkCollection(this.nowScenicId)
        }
      })
    },

    // 地图
    // putData () {
    //   this.getDatas(this.data)
    // },
    point () {
      const markers = []
      const windows = []
      const that = this
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          icon: `https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-${index + 1}.png`, // 不设置默认蓝色水滴
          events: {
            mouseover () {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach(window => {
                window.visible = false // 关闭窗体
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true
              })
            },
            click() {
              that.center = item.position.split(',')
            }
          }
        })
        windows.push({
          position: item.position.split(','),
          isCustom: true,
          offset: [105, 55], // 窗体偏移
          showShadow: false,
          visible: false, // 初始是否显示
          address: item.address
        })
      })
      //  加点
      this.markers = markers
      // 加弹窗
      this.windows = windows
    },

    // 将景点位置转换为景点坐标
    translate(address) {
      AMap.plugin('AMap.Geocoder', function() {
        let geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '秦皇岛'
        })

        geocoder.getLocation(address, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            console.log(result)
          }
        })
        console.log('map')
      })

    },

    // 点击切换现在展示景点id
    changeNowScenicId (nowId) {
      this.nowScenicId = nowId
      this.scenicList.forEach(item=>{
        if (item.id == nowId) {
          this.nowSceniceInfo = item
        }
        this.translate(item.position)
      })
      // this.getCollection()
      this.checkCollection(nowId)
      // console.log(this.nowScenicId,this.isCollected)

    },

    // 收藏景点按钮点击方法
    collectSpot () {
      if (this.isCollected) {
        let temp = confirm("是否确定取消收藏？")
        if (temp) {
          this.$axios({
            method: 'POST',
            url: '/deleteCollection',
            data: {
              phone: this.userPhone,
              id: this.nowScenicId
            }
          }).then(res=>{
            if (res.data.result == 1) {
              this.isCollected = false
              // 加取消成功提示框
              this.$message({
                message: '取消收藏成功',
                type: 'success'
              });
              this.getCollection()
            }
          })
        }
      } else {
        console.log(this.userPhone)
        this.$axios({
          method: 'POST',
          url: '/createCollection',
          data: {
            phone: this.userPhone,
            id: this.nowScenicId
          }
        }).then(res=>{
          if (res.data.result == 1) {
            this.isCollected = true
            // 加收藏成功提示框
            this.$message({
              message: '收藏成功',
              type: 'success'
            });
            this.getCollection()
          }
        })
      }
    },

    // 获取用户收藏景点信息
    getCollection () {
      this.$axios({
        method: 'POST',
        url: '/getCollection',
        data: {
          phone: this.userPhone
        }
      }).then(res=>{
        if (res.data.result == 1) {
          this.collectionList = res.data.list
        }
      })
      // let flag = this.collectionList.findIndex(function (item){
      //   console.log(item.id)
      //   return tourId == item.id
      // })
      // console.log(flag)
      // if (flag == -1) {
      //   this.isCollected = false
      // } else {
      //   this.isCollected = true
      // }
      // console.log(tourId,'ho',this.isCollected)
    },

    // 匹配景点是否收藏
    checkCollection(tourId) {
      let flag = this.collectionList.findIndex(function (item){
        console.log(item.id)
        return tourId == item.id
      })
      console.log(flag)
      if (flag == -1) {
        this.isCollected = false
      } else {
        this.isCollected = true
      }
      console.log(tourId,'ho',this.isCollected)
    },

    // 鼠标滚轮滚动一段距离指示箭头消失
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 500) {
        this.isArrow = false
      } else {
        this.isArrow = true
      }
    },
  }
}
</script>

<style scoped>
  .container {
    /*margin: .5rem 0;*/
    /*padding: 0 3rem;*/
  }
  /*轮播图*/
  .rotation-chart {
    position: relative;
    /*margin: 0 3rem;*/
    padding: .5rem 3rem 0 3rem;
    height: calc(100vh - 9rem);
    background: linear-gradient(to bottom, #2c3e50, #ffffff);
    background: -webkit-linear-gradient(to bottom, #2c3e50, #ffffff);
    background: -o-linear-gradient(to bottom, #2c3e50, #ffffff);
    background: -ms-linear-gradient(to bottom, #2c3e50, #ffffff);
    background: -moz-linear-gradient(to bottom, #2c3e50, #ffffff);
  }
  .el-carousel {
    height: calc(100vh - 9rem);
  }
  /deep/ .el-carousel__container {
    height: calc(100vh - 12rem);
  }
  .el-carousel__item {
    width: 50%;
    height: 100%;
  }
  .rotation-chart-image {
    width: 100%;
    height: 100%;
  }
  /*.rotation-chart {*/
  /*  !*margin: 0 3rem;*!*/
  /*  padding: .5rem 3rem 0 3rem;*/
  /*  height: calc(100vh - 9.5rem);*/
  /*  background: linear-gradient(to bottom, #2c3e50, #ffffff);*/
  /*}*/
  /*.el-carousel {*/
  /*  height: calc(100vh - 9.5rem);*/
  /*}*/
  /*/deep/ .el-carousel__container {*/
  /*  height: calc(100vh - 9.5rem);*/
  /*}*/
  /*.el-carousel__item {*/
  /*  height: 100%;*/
  /*}*/
  /*.rotation-chart-image {*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*}*/
  .el-carousel__item h3 {
    height: 100%;
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  @keyframes show {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
  }
  .jiantou{
    position: absolute;
    bottom: 3rem;
    right: 1rem;
    z-index: 10;
    animation: show infinite linear 2s;
  }
  .jiantou i{
    font-style: normal;
    font-family: iconfont;
    font-size: 6rem;
    opacity: 0.8;
  }

  /*.el-carousel__item:nth-child(2n) {*/
  /*  background-color: #99a9bf;*/
  /*}*/

  /*.el-carousel__item:nth-child(2n+1) {*/
  /*  background-color: #d3dce6;*/
  /*}*/
  /*景点选项*/
  .scenic-spot {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 3rem 3rem 0 3rem;
  }
  @-webkit-keyframes bs2-in {
    0% {
      box-shadow: inset -1px 1px 3px 2px powderblue, inset 1px -1px 3px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @-moz-keyframes bs2-in {
    0% {
      box-shadow: inset -1px 1px 3px 2px powderblue, inset 1px -1px 3px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @-o-keyframes bs2-in {
    0% {
      box-shadow: inset -1px 1px 3px 2px powderblue, inset 1px -1px 3px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @keyframes bs2-in {
    0% {
      box-shadow: inset -1px 1px 3px 2px powderblue, inset 1px -1px 3px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @-webkit-keyframes bs2 {
    0% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }

    50% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @-moz-keyframes bs2 {
    0% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }

    50% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @-o-keyframes bs2 {
    0% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }

    50% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  @keyframes bs2 {
    0% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }

    50% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 10px 0 pink;
    }

    100% {
      box-shadow: inset -1px 1px 5px 2px powderblue, inset 1px -1px 5px 2px #ffbb33, 0 0 0px 0 pink;
    }
  }
  .scenic-spot-item {
    width: 10rem;
    font-size: .8rem;
    /*background: #65a6ff;*/
    /*background: #91b4ed;*/
    background: white;
    box-shadow:  0 0 .3rem #cccccc;
    padding: 1rem 0;
    margin: 0 1rem 1rem 0;
    white-space: nowrap;
    text-align: center;
    border-radius: 2rem;
    color: #000000;
    cursor: pointer;
  }
  .scenic-spot-item:active {
    background: linear-gradient(to bottom left, #bcdbe0, #fdd88e);
    background: -moz-linear-gradient(to bottom left, #bcdbe0, #fdd88e);
    background: -ms-linear-gradient(to bottom left, #bcdbe0, #fdd88e);
    background: -o-linear-gradient(to bottom left, #bcdbe0, #fdd88e);
    background: -webkit-linear-gradient(to bottom left, #bcdbe0, #fdd88e);
  }
  .scenic-spot-item:hover {
    -webkit-animation: bs2 linear 1s 1s infinite, bs2-in 1s;
    -moz-animation: bs2 linear 1s 1s infinite, bs2-in 1s;
    animation: bs2 linear 1s 1s infinite, bs2-in 1s;
  }
  /*景点信息*/
  .scenic-spot-info {
    height: 45rem;
    display: flex;
    justify-content: flex-start;
    margin: 1rem 3rem 0 3rem;
  }
  /*景点展示盒子*/
  .scenic-spot-info-box {
    width: 50%;
    /*height: 45rem;*/
    position: relative;
  }
  .tags {
    position: absolute;
  }
  #tagBar {
    width: 2rem;
    text-align: center;
    padding: 1.5rem 0;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    box-shadow: 0 0 .3rem #cccccc;
    font-size: .9rem;
    cursor: pointer;
  }
  #tagBar:first-child {
    color: cornflowerblue;
    margin-bottom: .5rem;
    /*background: #ffffff;*/
  }
  #tagBar:nth-child(2) {
    color: #42b983;
    margin-bottom: .5rem;
    /*background: rgba(145,180,237,0.47);*/
  }
  #tagBar:last-child {
    color: darkorange;
    /*background: rgba(145,180,237,0.47);*/
  }
  .checked {
    background: #ffffff;
  }
  .noChecked {
    background: rgba(145,180,237,0.47);
  }
  .box-switch {
    width: calc(100% - 2rem);
    height: 100%;
    margin-left: 2rem;
    box-shadow: 0 0 .3rem #666666;
  }
  .box-switch .image-box {
    width: 100%;
    height: 100%;
  }
  .box-switch .image-box img {
    width: 100%;
    height: 100%;
  }
  .map-box {
    width: calc(100% - 2rem);
    height: 100%;
    box-shadow: 0 0 .3rem #666666;
    position: absolute;
    top: 0;
    display: none;
  }
  .scene-box {
    width: calc(100% - 2rem);
    height: 100%;
    box-shadow: 0 0 .3rem #666666;
    position: absolute;
    top: 0;
    /*display: none;*/
  }
  .scenic-iframe {
    width: 100%;
    height: 100%;
  }
  #info-window {
    font-size: 1.5rem;
    background: rgba(255,255,255,0.62);
  }
  /*景点展示内容*/
  .scenic-spot-info-content {
    width: 50%;
    overflow-y: auto;
    /*border: .1rem solid #000000;*/
    padding: 2rem 1rem 2rem 2rem;
    box-sizing: border-box;
  }
  .scenic-spot-name {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 2rem 0;
  }
  .scenic-spot-info-item {
    margin: 1rem 0;
    display: flex;
    justify-content: flex-start;
  }
  .scenic-spot-introduction-title {
    width: 6rem;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .scenic-spot-introduction-content {
    width: calc(100% - 8rem);
    font-size: 1rem;
  }
  .scenic-spot-info-collect {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    font-size: 1rem;
  }
  .scenic-spot-info-collect i {
    display: block;
    padding: .5rem 1rem;
    border: .2rem solid #ffbb33;
    border-radius: 2rem;
    vertical-align: center;
    font-style: normal;
  }
</style>
